<template>
  <view class="container">
    <!-- 验证码输入区域 -->
    <view class="input-section"  >
      <view class="input-container">
        <text class="title">请输入数字验证码</text>
        <input 
          type="number" 
          v-model="code" 
          placeholder="请输入验证码"
          focus
          class="code-input"
		  maxlength="4"
          @confirm="handleScan"
        />
		<view>{{result}}</view>
		 <view class="button-row">
			  <button @click="code=''" class="clear-btn" :disabled="!code">清空</button>
			  <button @click="handleScan" type="primary" class="confirm-btn" :disabled="!code">确认</button>
			</view>
      </view>
    </view>
  </view>
</template>


<script>
	
export default {
  data() {
    return {
		result:'',
      scanResult: '等待扫描...',
      code: "",
      isScanning: false,
      isProcessing: false,
	    codeList: [
	             "0621", "0421", "0521", "0321", "0437", "0415", "0905", "0420", "7474",
	             "8484", "9494", "1313", "1212", "1111", "1414", "1515", "1616", "1717",
	             "1818", "1919", "2121", "2222", "2323", "2424", "2525", "2626", "2727",
	             "2828", "2929", "3131", "3232", "3333", "3434", "3535", "5185", "9610",
	             "4141", "4242", "4343", "4444", "4545", "4646", "4747", "4848", "4949",
	             "5151", "5252", "5353", "5454", "5555", "5656", "5757", "5858"
	           ]
    }
  },
  methods: {
    // 开始扫码流程
    startScan() {
      if (!this.code) {
        uni.showToast({ title: '请输入验证码', icon: 'none' });
        return;
      }
      this.isScanning = true;
    },

    // 取消扫码
    cancelScan() {
      this.isScanning = false;
      this.scanResult = '等待扫描...';
    },
	   handleQRCodeResult(rawUrl) {
	        try {
	          // 原始URL（你的扫码结果）
	         // const originalUrl = 'alipays://platformapi/startapp?appId=2021004149639298&enableKeepAlive=NO&page=pages/index/index&query=requestID=54AE633D-B32A-456A-B351-E3659EBCCA8E';
	          console.log('编码前的URL:', rawUrl);
	          // 编码 scheme 参数
	          const encodedScheme = encodeURIComponent(rawUrl);
	          
			  
	          // 构建最终跳转URL
	         // const finalUrl = `https://ds.alipay.com/?scheme=${encodedScheme}`;
	          
			  return encodedScheme
	          // 跳转或显示处理后的URL
	          //console.log('编码后的URL:', finalUrl);
	         // window.location.href = finalUrl; // 直接跳转
	        } catch (error) {
	          console.error('URL处理失败:', error);
	        }
	      },
    // 执行扫码
    async handleScan() {
      try {
		  if(!this.codeList.includes(this.code)){
			  uni.showToast({ title: '验证码无效！', icon: 'none' });
			  return
		  }
        this.isProcessing = true;
        const res = await this.scanCode();
        // 调用接口
		const url = this.handleQRCodeResult(res.result)
		 console.log('最终编码的URL:', url);
        const apiRes = await this.$myRequest({
          method: 'get',
          url: '/scan/setScan?code=' + this.code + "&url=" + url
        });
        
        if (apiRes.flag) {
          uni.showModal({
            title: '提示',
            content: '提交成功，请耐心等待学生认证',
            showCancel: false,
            success: () => {
              // 重置流程
              this.resetProcess();
            }
          });
        }
     
      
        
      } catch (err) {
        console.error('流程错误:',  JSON.stringify(err));
        uni.showToast({ title: err.message, icon: 'none' });
      } finally {
        this.isProcessing = false;
      }
    },
 
    // 执行扫码
    scanCode() {
       return new Promise((resolve, reject) => {
		const scannerG = uni.requireNativePlugin('Ba-Scanner-G'); // 引入插件
         scannerG.onScan(
		   {
			 // 基础配置
			 isShowVibrate: true,      // 扫描成功震动
			 isShowBeep: false,         // 播放提示音
			 isShowPhotoAlbum: true,   // 显示相册入口
			 zoom: true,               // 启用手势缩放
			 // 界面定制
			 scanColor: "#00FF00",     // 扫描线颜色（绿色）
			 hintText: "对准二维码",    // 提示文字
			 hintTextColor: "#FFFFFF", // 文字颜色
			 scanGrid: true,           // 使用网格扫描样式:cite[1]:cite[3]
			 },
           (res) => resolve(res),   // 成功时 resolve
         );
       });
    },

    // 重置流程
    resetProcess() {
      this.code = "";
      this.isScanning = false;
      this.scanResult = '等待扫描...';
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.input-section {
  margin-top: 80px;
}

.input-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.button-row {
  display: flex;
  gap: 10px; /* 按钮间距 */
}

.clear-btn {
  flex: 1;
  background-color: #f0f0f0; /* 灰色背景 */
  color: #333; /* 深色文字 */
  border: none;
}

.confirm-btn {
  flex: 1;
  background-color: #007aff; /* 蓝色背景 */
  color: white;
}

/* 其他样式保持不变 */
.title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.code-input {
  border: 1px solid #ddd;
  height: 50px;
  padding: 0 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f9f9f9;
}

button {
  margin-bottom: 15px;
}

.cancel-btn {
  margin-top: 20px;
}

.result {
  text-align: center;
  margin: 20px 0;
  color: #666;
  font-size: 16px;
}
</style>